<template>
  <div class="goods-container">
    <div v-for="(item, index) in goodsData" :key="index" class="goods-item">
      <router-link
        :to="{ name: 'detail', query: { item: JSON.stringify(item) } }"
      >
        <div class="goods-link">
          <img
            :src="item.mainImage"
            :alt="item.productName"
            class="goods-image"
          />
        </div>
      </router-link>
      <p class="goods-name">{{ item.productName }}</p>
      <div class="price-info">
        <p class="goods-price">￥{{ item.price }}</p>
        <p class="original-price">￥{{ item.originalPrice }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
defineProps(["goodsData"]);
</script>

<style scoped>
/* 新增样式：价格信息容器 */
.price-info {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: baseline; /* 保持基线对齐，让价格在同一水平线上 */
  margin: 0 12px 12px; /* 调整外边距，与原 goods-price 保持一致 */
}

/* 商品价格 */
.goods-price {
  color: #ff5000;
  font-size: 18px; /* 稍微增大字体，更强调 */
  font-weight: bold;
  margin-right: 8px; /* 在当前价格和原价之间添加一些间距 */
  margin-bottom: 0; /* 移除默认段落底边距 */
  white-space: nowrap; /* 防止价格换行 */
}

.original-price {
  text-decoration: line-through; /* 添加删除线 */
  font-size: 0.9em; /* 相对于父元素（price-info）的字体大小，略大于 0.8em */
  color: #999; /* 较浅的颜色 */
  margin-bottom: 0; /* 移除默认段落底边距 */
  white-space: nowrap; /* 防止价格换行 */
}

/* 商品容器 - 网格布局 */
.goods-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行两列 */
  gap: 16px; /* 商品间距 */
  padding: 12px; /* 容器内边距 */
}

/* 单个商品项样式 */
.goods-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s; /* 添加box-shadow过渡 */
}

.goods-item:hover {
  transform: translateY(-5px); /* 鼠标悬停时，向上移动5px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 鼠标悬停时，阴影变大变深 */
}

/* 商品链接 */
.goods-link {
  display: block;
  text-decoration: none;
  color: #333;
}

/* 商品图片 */
.goods-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

/* 商品名称 */
.goods-name {
  margin: 8px 12px;
  font-size: 14px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Safari and Chrome */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>